<template>
  <div>
    <!-- <div class="studentRule_line">
      <span class="left_title">
        <h4>学员自定义信息</h4>
      </span>
      <span class="right_btn">
        <a-button>设置</a-button>
      </span>
    </div> -->
<a-card :bordered="false">
    <div class="studentRule_line">
      <span class="left_title">
        <h4>学员来源</h4>
      </span>
      <span class="right_btn">
        <a-button @click="showChild('sources')">设置</a-button>
      </span>
    </div>

    <div class="studentRule_line">
      <span class="left_title">
        <h4>年级</h4>
      </span>
      <span class="right_btn">
        <a-button @click="showChild('grades')">设置</a-button>
      </span>
    </div>

    <div class="studentRule_line">
      <span class="left_title">
        <h4>成长档案类型</h4>
      </span>
      <span class="right_btn">
        <a-button @click="showChild('grow')">设置</a-button>
      </span>
    </div>
    <sources-model ref="sources"></sources-model>
    <grade-model ref="grades"></grade-model>
    <growth-type ref="growType"></growth-type>
</a-card>
  </div>
</template>

<script>
import sourcesModel from '@/components/studentSource'
import gradeModel from '@/components/gradeManage'
import growthType from '@/components/growthType'
export default {
  components: {
    sourcesModel,
    gradeModel,
    growthType
  },
  methods: {
    showChild(e) {
      if (e == 'sources') {
        this.$refs.sources.showModal()
      } else if (e == 'grades') {
        this.$refs.grades.showModal()
      }else if(e == 'grow'){
        this.$refs.growType.showModal()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.studentRule_line {
  padding: 20px 24px 12px;
  .left_title {
    display: inline-block;
    width: 120px;
    margin-right: 20px;
    h4 {
      display: inline-block;
    }
  }
  .right_btn {
    button {
      width: 100px;
      height: 28px;
    }
  }
}
</style>